$(() => {
    search();

    //给查询按钮添加事件
    $(".action #search-btn").click(() => {
        //search();
    });

    $(".action #reset-btn").click(() => {
        $(".search>form").trigger("reset");
    });

    //删除按钮事件
    $(".action #del-btn").click(() => {
        let checked = $("#tbl>tbody>tr>td:first-child>:checked");//所有选中的复选框
        let ids = [];//数组用于存储主键
        checked.each(function () {
            ids.push($(this).val());
        });

        layui.use(() => {
            let layer = layui.layer;
            if (ids.length === 0) {
                layer.msg("请选中您要删除的行");
            } else {
                layer.confirm("是否确认删除所有选中的行?", function () {
                    //如用户确认，则会执行此中代码
                    deleteByIds(ids);
                });
            }
        });
    });

    //新增按钮事件
    $(".action #add-btn").click(() => {
        //跳转到新页面
        //location.href = "/student/add";

        //弹出窗口
        layui.use(() => {
            let layer = layui.layer;
            layer.open({
                type: 2,//表示弹出iframe窗口
                title: "新增用户",
                area: ["500px", "550px"],
                content: "/student/add",
                btn: ["确定", "取消"],
                yes: function (index, layero, that) {//第1个按钮的回调，等同于btn1的回调
                    let win = layero.find('iframe')[0].contentWindow;
                    win.save((success) => {
                        if (success) {
                            layer.close(index);//关闭弹窗
                        } else {
                            layer.alert("新增用户失败");
                        }
                    });
                }
            });
        });
    });

    //修改按钮事件
    $(".action #edit-btn").click(() => {
        let checked = $("#tbl>tbody>tr>td:first-child>:checked");//所有选中的复选框
        let ids = [];//数组用于存储主键
        checked.each(function () {
            ids.push($(this).val());
        });

        layui.use(() => {
            if (ids.length === 0) {
                layer.msg("请选中您要修改的行");
            } else if (ids.length > 1) {
                layer.msg("您一次只能选中一行数据进行修改");
            } else {//只选中了一条记录
                let id = ids[0];//取出唯一选择主键
                //location.href = "/student/edit?id=" + id;
                layui.use(() => {
                    let layer = layui.layer;
                    layer.open({
                        type: 2,//弹出一个iframe窗口,
                        title: "修改用户",
                        area: ["500px", "550px"],
                        content: "/student/edit?id=" + id,
                        btn: ["确定", "取消"],
                        yes: function (index, layero, that) {
                            //向后台发出微服务请求，修改用户信息
                            //获取子页面的window对象
                            let win = layero.find("iframe")[0].contentWindow;
                            win.edit((success) => {
                                if (success) {
                                    layer.close(index);//关闭窗口
                                    layer.msg("修改用户信息成功");
                                    search();
                                } else {
                                    layer.alert("修改用户信息失败");
                                }
                            });
                        }
                    });
                });
            }
        });
    });
});

//根据用户主键批量进行删除
function deleteByIds(ids) {
    //使用ajax发出请求，请求后台的微服务
    let url = "/api/v1/users";
    $.ajax({
        url,
        method: "delete",
        dataType: "json",
        traditional: true,
        data: {
            ids
        },
        success(resp) {
            search();//刷新表格
            layui.use(() => {
                let layer = layui.layer;
                layer.msg("删除操作成功，共删除" + resp.rows + "行");
            });
        }
    });
}

//查询所有商铺
function search() {
    layui.use(['table'], function () {
        let table = layui.table;
        //创建表格渲染实例
        table.render({
            elem: '#tbl',
            url: '/api/v1/stores', //会向后台传递分页参数page和limit
            cellMinWidth: 80,
            page: true,//开启分页
            limit: 20,//每页显示20条数据
            even: true,//斑马线
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true},
                {field: 'storeNo', width: 120, title: '商铺编号'},
                {field: 'name', width: 150, title: '商铺名称'},
                {field: 'manager', width: 150, title: '负责人'},
                {field: 'managerPhone', width: 150, title: '负责人电话'},
                {field: 'managerExtraContact', width: 180, title: '负责人其它联系方式'},
                {field: 'legalPerson', width: 150, title: '法人'},
                {field: 'legalPersonPhone', width: 150, title: '法人电话'},
                {field: 'legalPersonExtraContact', width: 150, title: '法人其它联系方式'},
                {field: 'gmtCreate', width: 180, title: '创建时间'},
                {field: 'gmtUpdate', width: 180, title: '最后修改时间'},
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            ]]
        });

        // 工具栏事件
        table.on('toolbar(tbl)', function (obj) {
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);

            switch (obj.event) {
                case 'getCheckData':
                    let data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'getData':
                    let getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
            }
        });

        //触发单元格工具事件
        table.on('tool(tbl)', function (obj) { // 双击 toolDouble
            let data = obj.data; // 获得当前行数据
            if (obj.event === 'edit') {
                layer.open({
                    title: '编辑 - id:' + data.id,
                    type: 1,
                    area: ['80%', '80%'],
                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                });
            }
        });

        //触发表格复选框选择
        table.on('checkbox(tbl)', function (obj) {
            console.log(obj)
        });

        //行单击事件
        table.on('row(tbl)', function (obj) {
            //console.log(obj);
            //layer.closeAll('tips');
        });
    });
}